<template>
  <div>
    <el-button type="primary" @click="add">
      <el-icon :size="14">
        <plus />
      </el-icon>
      添加
    </el-button>
  </div>
  <el-divider />
  <!--表格-->
  <div>
    <el-table :data="roles" style="width: 100%" row-key="id" border >
      <el-table-column prop="id" label="编号" sortable></el-table-column>
      <el-table-column prop="name" label="角色名称" sortable></el-table-column>
      <el-table-column prop="code" label="代码"></el-table-column>
      <el-table-column prop="remark" label="说明" width="300"></el-table-column>
      <el-table-column prop="created" label="创建时间"></el-table-column>
      <el-table-column prop="updated" label="更新时间"></el-table-column>
      <el-table-column prop="statu" label="状态" width="100"></el-table-column>
      <el-table-column label="操作" width="280">
        <template #default="scope">
          <el-button type="primary" plain size="small" @click="edit(scope.row)">编辑</el-button>
          <el-button type="warning" plain size="small" @click="setMenus(scope.row)">权限</el-button>
          <el-button type="danger" plain size="small" @click="del(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <!--编辑对话框-->
  <el-dialog title="编辑角色信息" v-model="dialogVisible" width="30%" @close="closeDialog">
    <div>
      <el-form :model="roleInfo" :rules="rules" ref="roleInfo" label-width="100px">
        <el-form-item label="角色名称" prop="name">
          <el-input v-model="roleInfo.name" placeholder="请输入角色名称"></el-input>
        </el-form-item>
        <el-form-item label="角色代码" prop="code">
          <el-input v-model="roleInfo.code" placeholder="请输入角色代码"></el-input>
        </el-form-item>
        <el-form-item label="角色说明" prop="remark">
          <el-input type="textarea" :rows="2" v-model="roleInfo.remark" placeholder="请输入角色说明"></el-input>
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="save" :disabled="btnSaving">确 定</el-button>
      </span>
    </template>
  </el-dialog>
  <!-- 设置权限对话框 -->
  <el-dialog title="设置角色权限" v-model="menuDialogVisible" width="30%" @opened="opened">
    <el-tree
        ref="menuTree"
        :data="menus"
        :props="menuProps"
        node-key="id"
        :default-expand-all=true
        show-checkbox
        :check-strictly=true
    ></el-tree>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="menuDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveMenus" :disabled="loading">确 定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import {ElMessage, ElMessageBox} from "element-plus";
import {getRolePerms, roleAdd, roleDelete, roleEdit, roleList, roleSave, setRolePerms} from "../../api/role";
import {getMenuList} from "../../api/menus";

export default {
  name: 'Roles',
  setup() {
    // 角色信息
    const newRole = {
      name: '',
      code: '',
      remark: '',
      statu: 1,
      permIds: []
    }
    return {
      newRole
    }
  },
  data() {
    return {
      roles: [],
      dialogVisible: false,     // 编辑对话框
      menuDialogVisible: false, // 设置权限对话框
      roleInfo: this.newRole, // 角色信息
      menus: [],  // 菜单列表
      rules: {
        name: [{ required: true, message: '请输入角色名称', trigger: 'blur' }],
        code: [{ required: true, message: '请输入角色代码', trigger: 'blur' }],
        remark: [{ required: true, message: '请输入角色说明', trigger: 'blur' }],
      },  // 验证规则
      menuProps: {
        label: 'title',
        children: 'children'
      },
      loading: true,  // 权限设置按钮
      btnSaving: false  // 保存角色信息按钮
    }
  },
  created() {
    this.loadRoles()
    this.loadMenuTree()
  },
  methods: {
    // 加载数据
    loadRoles() {
      // 获取角色列表
      roleList().then(res => {
        this.roles = res.data
      })
    },
    // 获取菜单树
    loadMenuTree() {
      // 获取菜单树
      getMenuList().then(res => {
        this.menus = res.data
      })
    },
    // 添加角色
    add() {
      // 构建新角色
      roleAdd().then(res => {
        this.roleInfo = JSON.parse(JSON.stringify(this.newRole))
        this.dialogVisible = true
      })
    },
    // 编辑
    edit(row) {
      // 编辑角色信息
      roleEdit().then(res => {
        this.roleInfo = JSON.parse(JSON.stringify(row))
        this.dialogVisible = true
      })
    },
    // 设置访问权限
    setMenus(row) {
      this.loading = true
      // 获取包含用户权限的菜单列表
      getRolePerms(row.id).then(res => {
        this.roleInfo = JSON.parse(JSON.stringify(row))
        this.roleInfo.permIds = res.data
        this.menuDialogVisible = true
      })
    },
    // 保存权限设置信息
    saveMenus() {
      // 获取选中的节点编号
      const permIds = this.$refs['menuTree'].getCheckedKeys()
      // 保存角色权限列表
      setRolePerms(this.roleInfo.id, permIds).then(res => {
        ElMessage({
          message: res.msg,
          type: 'success'
        })
      })
      // 关闭对话框
      this.menuDialogVisible = false
    },
    // 打开对话框后
    opened() {
      // 设置角色权限
      this.$refs['menuTree'].setCheckedKeys(this.roleInfo.permIds)
      this.loading = false
    },
    // 保存信息
    save() {
      // 校验规则
      this.$refs['roleInfo'].validate((valid) => {
        if(valid) {
          // 提示
          ElMessageBox.confirm('确认保存角色信息?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          }).then(() => {
            this.btnSaving = true // 确定按钮不可用
            // 保存角色信息
            roleSave(this.roleInfo).then(res => {
              this.btnSaving = false  // 确定按钮恢复可用
              ElMessage({
                message: res.msg,
                type: 'success'
              })
              this.dialogVisible = false
              this.loadRoles()  // 重新加载角色列表
            })
          }).catch(() => {
            ElMessage({
              message: '取消保存角色信息',
              type: 'warning'
            })
          })
        }
      })

    },
    // 删除角色
    del(id) {
      this.$confirm('确认删除角色信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        // 删除指定角色
        roleDelete(id).then(res => {
          this.$message({
            type: 'success',
            message: res.msg,
          })
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除',
        })
      })
    },
    // 关闭对话框
    closeDialog() {
      this.$refs['roleInfo'].resetFields()  // 清空验证信息
    }
  }
}
</script>

<style>

</style>